<template>
  <el-table :data="articles" style="width: 100%;">
    <el-table-column label="文章标题" prop="title"></el-table-column>
    <el-table-column label="文章发布时间" prop="createTime"></el-table-column>
    <el-table-column label="文章来源" prop="stemfrom"></el-table-column>
    <el-table-column label="浏览量" prop="read"></el-table-column>
    <el-table-column label="点赞数" prop="star"></el-table-column>
    <el-table-column label="评论数" prop="comment"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="handleClickButtonUpdate(scope.row)" type="primary" size="mini">编辑</el-button>
        <el-button @click="handleClickButtonDelete(scope.row)" type="danger" size="mini">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination layout="prev, pager, next"
                 :total="count"
                 :page-size="pageSize"
                 :current-page="page"
                 @current-change="handlePaginationCurrentChange"
                 style="margin-top: 20px;"></el-pagination>
</template>

<script>
  export default {
    data() {
      return {
        articles: [],
        page: 1,
        pageSize: 0,
        count: 0
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        this.$http({
          path: '/article/findAll',
          method: 'get',
          params: {
            page: this.page,
            author: this.$store.state.user.username
          }
        }).then(rel => {
          const {result, page, pageSize, count} = rel.data
          this.articles = result
          this.page = page
          this.pageSize = pageSize
          this.count = count
        })
      },
      handleClickButtonUpdate(row) {
        this.$router.push({name: 'AdminArticleUpdate', query: {id: row.id}})
      },
      handleClickButtonDelete(row) {
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this
            .$http({
              path: '/article/del',
              method: 'post',
              params: {
                id: row.id
              }
            })
            .then(res => {
              const {msg, code} = res.data
              this.$message({
                message: msg,
                type: code === 200 ? 'success' : 'error'
              })
              if (code === 200) {
                this.getData()
              }
            })
        })
      },
      handlePaginationCurrentChange(pageIdx) {
        this.page = pageIdx
        this.getData()
      }
    }
  }
</script>

<style scoped>

</style>
